<div id="map" class="map" style="width: 100%, height:     100%"></div>

<div id="mapDesignDescription" class="jumbotron" style="color: #444;">
	<h1>Design the maps</h1>
	<p>Draw your maps along visible borders like streets, tracks or natural borders like rivers or woods.</p>
	<p class="lead">
		<a href="#" class="btn btn-lg btn-default">Learn how to draw the territories here</a>
	</p>

	<p>
		<img src="finalministry/images/monitor.png" /> <br> <b>Note:</b> You need <u>at least</u> a <a href="http://en.wikipedia.org/wiki/1080p" target="next">full hd monitor</a> with <b>1920x1080</b> resolution!
	<div class="marketing">
		<p>Enable the fullscreen mode and take enough time and patient to draw new maps. Plan the size of the maps according to enable one person to preach in this territory for a maximum of 2 hours.</p>
	</div>
	</p>
</div>

<script src="#HOME#/js/finalministryMap.js" type="text/javascript"></script>
<script type="text/javascript">
	var map = new ol.Map({
		controls : ol.control.defaults()
				.extend([ new ol.control.FullScreen() ]),
		interactions : ol.interaction.defaults({
			doubleClickZoom : false
		}),
		target : 'map',
		layers : [ new ol.layer.Tile({
			title : 'OpenStreetMaps',
			preload : Infinity,
			source : new ol.source.OSM(),
			visible : true
		}) ],
		view : new ol.View({
			center : ol.proj.transform([ 9.41, 48.82 ], 'EPSG:4326',
					'EPSG:3857'),
			zoom : 12
		})
	});

	//Add additional layers from Bing
	function addAdditionalBingLayers() {
		var styles = [ 'Road', 'Aerial', 'AerialWithLabels' ];
		var i, ii;
		for (i = 0, ii = styles.length; i < ii; ++i) {

			map
					.addLayer(new ol.layer.Tile(
							{
								title : 'Bing ' + styles[i],
								visible : false,
								preload : Infinity,
								source : new ol.source.BingMaps(
										{
											key : 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
											imagerySet : styles[i]
										})
							}));
		}
	}

	addAdditionalBingLayers();

	// Add my own written control for editing the map
	//var FMap = {};

	// EDIT CONTROL
	FMap.editControl = function(opt_options) {

		var options = opt_options || {};

		var editToolDiv = document.createElement('div');
		editToolDiv.setAttribute('id', 'editTool');
		editToolDiv.className = 'fm-map-controls fm-map-control-edit ol-unselectable draggableDiv draggableTitle';

		ol.control.Control.call(this, {
			element : editToolDiv,
			target : options.target
		});

	};
	ol.inherits(FMap.editControl, ol.control.Control);
	map.addControl(new FMap.editControl());
	$('#editTool').load('finalministry/components/mapEditTools.htm');

	// COLOR PICKER
	FMap.colorPickerControl = function(opt_options) {

		var options = opt_options || {};

		var editToolDiv = document.createElement('div');
		editToolDiv.setAttribute('id', 'colorPickerTool');
		editToolDiv.className = 'fm-map-controls fm-map-control-color ol-unselectable draggableDiv';

		ol.control.Control.call(this, {
			element : editToolDiv,
			target : options.target
		});

	};
	ol.inherits(FMap.colorPickerControl, ol.control.Control);
	map.addControl(new FMap.colorPickerControl());
	$('#colorPickerTool').load('finalministry/components/colorPicker.htm',
			function() {
				// FINALLY make all dialogs draggable
				$('.draggableDiv').draggable({
					cancel : "#colorSelector,#sqlDiv",
					snap : true
				});
			});

	/**
	 * Import territories by the congregation ID
	 * 
	 * TODO: load also the color from DB
	 */
	FMap.importTerritories = function(congregationID) {

		var IMPORTER = new ol.format.WKT();
		//var colorSelector = document.getElementById('colorSelected');

		var importedFeatureOverlay = new ol.FeatureOverlay({
			style : new ol.style.Style({
				fill : new ol.style.Fill({
					color : 'rgba(123,255,0,0.5)'
				}),
				stroke : new ol.style.Stroke({
					color : '#aa0000',
					width : 2
				}),
				image : new ol.style.Circle({
					radius : 7,
					fill : new ol.style.Fill({
						color : '#ffcc33'
					})
				})
			})
		});

		importedFeatureOverlay.setMap(map);

		$.getJSON('/territory', function(json) {
			$.each(json, function(index, territory) {

				//console.debug(territory);
				var elemento = IMPORTER
						.readFeature(territory.area.geometryAsString);
				importedFeatureOverlay.addFeature(elemento);
			});

			var modify = new ol.interaction.Modify({
				features : importedFeatureOverlay.getFeatures(),
				// the SHIFT key must be pressed to delete vertices, so
				// that new vertices can be drawn at the same position
				// of existing vertices
				deleteCondition : function(event) {
					return ol.events.condition.shiftKeyOnly(event)
							&& ol.events.condition.singleClick(event);
				}
			});
			map.addInteraction(modify);
		});
	};

	// Import all territories
	FMap.importTerritories(null);

	

	// TODO: add this layerswitcher to the Edit Tool Box
	//Add a layerswitcher
	//var layerSwitcher = new ol.control.LayerSwitcher();
	//map.addControl(layerSwitcher);
</script>